import './table1.less'
import React, { useState,useEffect } from 'react';
import { Pagination } from 'antd';
import { Link } from 'umi';
import { findProofList, findProof, proof, redProof, clickId, delProof } from '@/services/proof/proof'

//多选框

function Table1() {
    useEffect(() => {
        render();
    }, [])
    const render = async () => {
        const redIdProof=await redProof({
            id:2
         })
         const delIdProof=await delProof({
            id:3
         })
    }
    //表头
    const tHead = [];
    tHead.push('摘要信息', '科目名称', '借方金额', '贷方金额', '操作')

    //数据tableData--proofData
    const proofData = [];
    proofData.push(
        { id: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 1, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 2, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 3, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 4, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] }
    )


    //分页
    const [pageSize, setPageSize] = useState(10);

    const [current, setCurrent] = useState(2);
    const onchange = (current: number, pageSize: number) => {
        setPageSize(pageSize)
        setCurrent(current)
        console.log(pageSize);
        console.log(current);

    }
    const [redId, setRedId] = useState(0)
    const red = (i:number) => {
        redProof
        console.log(i+1);
        
    }
    const del = (i:number) => {
        delProof
        console.log(i+1);
    }



    return (
        <div className='table1'>
            {/* 表格 */}
            <table>
                <thead>
                    <th className='thtd' style={{ width: '1%', height: 30 }}>
                        1
                    </th>
                    {tHead.map((v, i) => <th className='thtd'>
                        {v}
                    </th>)}

                </thead>
                {/* <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} style={{ width: '9%' }} > */}
                {proofData.map((v, i) =>
                    <tbody>
                        <tr style={{ height: '70px', lineHeight: '70px' }}>
                            <td colSpan={tHead.length} style={{ textAlign: 'left', fontWeight: 600 }}>
                                <div style={{ width: '100%', height: '40px', lineHeight: '40px', marginTop: '15px', background: '#F8F8F8' }}>
                                    <span style={{ width: '9%' }}>2</span>
                                    日期：{v.date} &nbsp;&nbsp;&nbsp;凭证号：{v.fontNum} &nbsp;&nbsp;&nbsp;附件：<span>{v.moreFile}</span> &nbsp;&nbsp;&nbsp;审核状态：<span>{v.state}</span>
                                </div>
                            </td>
                            <td>
                                <div className='operate'>
                                    <Link to="checkProof"><div className='TBbtn'><h4>修改</h4></div></Link>
                                    <Link to="copyProof"><div className='TBbtn'><h4>复制</h4></div></Link>
                                    <div className='TBbtn'><h4>打印</h4></div>
                                    <div className='TBbtn' onClick={(i) => {red}}>冲红</div>
                                    <div className='TBbtn' onClick={(i) => {del}}>删除</div>
                                </div>
                            </td>

                        </tr>
                        <tr style={{ borderBottom: '#EDF0F6 solid 1px' }}>
                            <td>&nbsp;</td>
                            <td >{v.keyWord[0]}</td><td>{v.proName[0]}</td>
                            <td>{v.getMoney[0]}</td><td>{v.sendMoney[0]}</td>

                            <td>&nbsp;</td>
                        </tr>
                        <tr style={{ borderBottom: '#EDF0F6 solid 1px' }}>
                            <td>&nbsp;</td>
                            <td>{v.keyWord[1]}</td><td>{v.proName[1]}</td>
                            <td>{v.getMoney[1]}</td><td>{v.sendMoney[1]}</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr style={{ borderBottom: '#EDF0F6 solid 1px' }}>
                            <td colSpan={3} style={{ textAlign: 'right' }}>合计：</td>
                            <td>{v.getMoney[0] + v.getMoney[1]}</td><td>{v.sendMoney[0] + v.sendMoney[1]}</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>)}
                {/* </CheckboxGroup> */}
                <tfoot>
                    <td colSpan={tHead.length} style={{ textAlign: 'center' }}>
                        <Pagination
                            onChange={onchange}
                            onShowSizeChange={(current, size) => {
                                setPageSize(size)
                                setCurrent(current)
                                console.log(current);
                                console.log(size);
                            }}
                            total={proofData.length}
                            showTotal={(total) => `当前合计,共 ${proofData.length} 条记录`}
                            pageSize={pageSize}
                        />
                    </td>
                </tfoot>
            </table>
        </div>
    )
}
export default Table1